import React from 'react';

import {Link,Outlet} from "react-router-dom";

function Message(props) {

    const messages=[
        {id:'001',title:'消息1',content:'锄禾日当午'},
        {id:'002',title:'消息2',content:'汗滴禾下土'},
        {id:'003',title:'消息3',content:'谁之盘中餐'},
        {id:'004',title:'消息4',content:'粒粒皆辛苦'},
    ]

    return (
        <div>
            <div>
                <ul>
                    {messages.map((item)=>{
                        return(
                            <li key={item.id}>
                                <Link to={`detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link>
                            </li>
                        )
                    })}
                </ul>
            </div>
            <Outlet></Outlet>
        </div>
    );
}

export default Message;